import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet,
    FlatList
} from 'react-native';



import {
    Radio,
    CheckBox,
    Layout,
    Arrow,
    Button
} from './../../components';

interface Props {
    title:string,
    options: Array<Item>,
    onDialogClose:Function,
    onConfirm:Function,
    value:Array<number> | number
}

interface State {
    selected: Array<number>
}

interface Item {
    id: number,
    label: string
}

class Options extends PureComponent<Props, State> {

    constructor(props:Props) {
        super(props)
        const _selected = (
            [].concat(props.value as never)
        )
        this.state = {
            selected: _selected
        }
    }

    static defaultProps = {
        value:0,
        options: [],
        onDialogClose:() => null,
        onConfirm:() => null
    }

    get isMultiple () {
        const {
            value
        } = this.props;
        return Array.isArray(value);
    }

    get renderList() {
        const {
            options
        } = this.props;
        return options.map((item,i) => {
            return {
                ...item,key:`row_${i}`
            }
        })
    }

    private onPress = (id:number) => {
        const {
            selected
        } = this.state;

        if(!this.isMultiple) {
            this.setState({
                selected:[id]
            })
            return false
        }

        const _set = new Set(selected);

        if(_set.has(id)) {
            if(_set.size > 1) {
                _set.delete(id)
            }
        }
        else {
            _set.add(id)
        }

        this.setState({
            selected:[..._set]
        })
    }

    private onConfirm = () => {
        const {
            selected
        } = this.state;
        const {
            onConfirm
        } = this.props;
        this.onClose();
        onConfirm(selected,this.isMultiple)
    }

    private onClose = () => {
        const {
            onDialogClose
        } = this.props;
        onDialogClose();
    }

    private renderSave = () => {
        return (
            <Button
                style={styles.save}
                title="Save"
                onPress={this.onConfirm}
            />
        )
    }

    private renderRight = (
        selected:boolean,value:any
    ) => {
        const Arrow = this.isMultiple ?
            CheckBox:Radio;

        return (
            <View style={styles.right}>
                <Arrow
                    value={value}
                    checked={selected}
                    onChange={this.onPress}
                />
            </View>
        )
    }

    private renderItem = ({item}:any) => {
        const {
            selected
        } = this.state;

        const {
            id,
            label
        } = item;

        const _set = new Set(selected);
        const active = _set.has(item.id);

        return (
            <Arrow
                title={label}
                style={styles.itemStyle}
                onPress={() => this.onPress(id)}
                arrow={this.renderRight(active,id)}
            />
        )
    }

    render() {
        const {
            title
        } = this.props;

        return (
            <Layout
                fixed={true}
                title={title}
                scroll={false}
                padding={false}
                onBackPress={this.onClose}
                renderRight={this.renderSave}
            >
                <FlatList
                    data={this.renderList}
                    initialNumToRender={25}
                    renderItem={this.renderItem}
                />
            </Layout>
        )
    }
}

export default Options;

const styles = StyleSheet.create({
    itemStyle:{
        paddingLeft:18
    },
    save:{
        height:32
    },
    right:{
        paddingRight:18
    }
}) as any;